/**
 * 订单管理 交易订单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交易订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline1" ref="formInline">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline1.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="formInline1.alipayTradeNo" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="formInline1.paymentStatus" placeholder="请输入支付状态"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" sortable prop="id" label="序号"  width="60">
      </el-table-column>
      <el-table-column align="center" sortable prop="name" label="用户名" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="phone" label="电话" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="province" label="地址" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="payTime" label="支付时间" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="createTime" label="创建时间" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="tradeBody" label="商品名称" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="expireTime" label="过期时间" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="couponReduce" label="优惠价减免" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="finalAmount" label="最终金额" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="originAmount" label="交易金额" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="alipayTradeNo" label="阿里支付宝交易号" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="callbackContent" label="内容" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="paymentStatus" label="支付状态" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">预览</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @current-change="closeDialog"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%">
      <el-form label-width="120px" :model="editForm" ref="editForm">
            <el-form-item label="用户名">
              <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入名称" disabled></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input size="small" v-model="editForm.phone" auto-complete="off" placeholder="请输入号码" disabled></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input size="small" v-model="editForm.province" auto-complete="off" placeholder="请输入详细地址" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input size="small" v-model="editForm.alipayTradeNo" auto-complete="off" placeholder="请输入订单号" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品内容">
              <el-input size="small" v-model="editForm.tradeBody" auto-complete="off" placeholder="请输入商品内容" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品金额">
              <el-input size="small" v-model="editForm.originAmount" auto-complete="off" placeholder="请输入商品金额" disabled></el-input>
            </el-form-item>
            <el-form-item label="支付状态">
              <el-input size="small" v-model="editForm.paymentStatus" auto-complete="off" placeholder="请输入支付状态" disabled></el-input>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog(pagination.currentPage)">取 消</el-button>
        <el-button type="primary" @click="closeDialog(pagination.currentPage)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import orderApi from "@/api/order";
export default {
  data() {
    return {
      formInline1:{
        name:'',
        alipayTradeNo:'',
        paymentStatus:''
      },
      formInline:'',
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '预览订单信息',
      editForm: {
        name: '',
        phone: '',
        province: '',
        alipayTradeNo: '',
        tradeBody: '',
        originAmount: '',
        paymentStatus: ''
      },
      listData: [], //用户数据
      // 分页参数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },

  created() {
    this.getData(this.pagination.currentPage,this.pagination.pageSize,this.formInline1)
  },
  methods: {
    getData(currentPage,pageSize,query){
      orderApi.getOrder(currentPage,pageSize,query).then(req=>{
        this.listData=req.data.noticeList;
        this.loading = false
        this.pagination.currentPage=req.data.page.current
        this.pagination.pageSize=req.data.page.size
        this.pagination.total=req.data.page.total
      })
    },
    search(ruleFormName){
      this.$refs[ruleFormName].validate((valid) => {
        if (valid) {
          orderApi.getOrder(this.pagination.currentPage,this.pagination.pageSize,this.formInline1).then(req => {
            console.log(req);
            if(req.data.noticeList.length===0){
              this.$message.error("未查到相关数据")
            }else{
              this.listData = req.data.noticeList
              this.pagination.currentPage=req.data.page.current
              this.pagination.pageSize=req.data.page.size
              this.pagination.total=req.data.page.total
              this.loading=true
            }
          })
        } else {
          this.$message.error("数据校验失败")
          return false;
        }
      });
  },
    handleDelete(index,row) {
      this.$confirm("此操作删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=> {
        orderApi.deleteById(row.id)
        this.closeDialog(this.pagination.currentPage)
      }).catch(()=>{
        this.$message.info("取消删除操作");
      });
    },
    closeDialog(currentPage){
      this.getData(currentPage,this.pagination.pageSize,this.formInline1)
      this.editFormVisible=false
      this.editForm={}
    },
    openDialog(){
      this.editFormVisible=true
    },
    handleEdit(index,row){
      this.editForm=row;
      this.title='预览订单信息'
      this.openDialog()
    },
    edit(){
      if (this.title == "添加订单信息"){
        orderApi.save(this.editForm)
      }else if (this.title = "预览订单信息") {
        orderApi.updateById(this.editForm)
      }
      this.closeDialog(this.pagination.currentPage)
    }
  }
}
</script>



